<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品详情</title>
    <link rel="stylesheet" th:href="@{/css/reset.css}" href="./css/reset.css">
    <link rel="stylesheet" th:href="@{/css/goodsdetail.css}"  href="./css/goodsdetail.css">
    <script th:src="@{/js/rem.js}" src="./js/rem.js"></script>
</head>


<body>
    <div class="container">
        <img th:src="${product.imgUrl}" src="./images/goods.png" alt="" class="goods-img">
        <div class="goods-info">
            <div class="goods-name" th:text="${product.productName}">
                安卓数据线快充原装闪充加长通用高速充电器正品适用
                华为三星酷派手机2米usb充电线充电宝
            </div>
            <div class="price"><span class="points"></span>市场价：<span class="rmb" th:text="${product.productPrice}"></span></div>
            <div class="des" th:utext="${product.productSpecs}">说明：非产品质量问题不予退换</div>
            <!--<div class="select-btn">-->
                <!--<div class="minus-btn">-</div>-->
                <!--<div class="counts">1</div>-->
                <!--<div class="add-btn">+</div>-->
            <!--</div>-->
        </div>
        <div class="tab">
            <div class="tab-item tab-goods-detail current" data-show="goods-detail" data-hide="exchange-rule">商品详情</div>
            <div class="tab-item tab-exchange-rule" data-show="exchange-rule" data-hide="goods-detail">提货规则</div>
        </div>
        <!--<img class="goods-detail" src="./images/goods-detail.png" alt="">-->
        <div class="goods-detail" th:utext="${product.descn}"></div>
        <div class="exchange-rule" th:utext="${destails}" >

        </div>
        <div class="bottom" style="background-color: #DDDDDD;">
            <!--<div class="needpoints"><span>总计：</span><span class="needsPonts" style="color:#fe5002" th:text="${product.productPrice}"></span><span style="color:#fe5002">￥</span></div>-->
            <div class="exchange-btn" style=" position: absolute;right: 0px;">立即提货</div>
        </div>
        <div class="gotop">
            <!--<img src="./images/gotop.png" alt="">-->
            <span>顶部</span>
        </div>
    </div>
  <div class="mask">
        <div class="tip">
            <p class="title">积分不够</p>
            <p>目前您的积分不够兑换此商品</p>
            <p>请重新选择其他产品！</p>
            <!-- <div class="line"></div> -->
            <div class="confirm-btn">确定</div>
        </div>
    </div>

    <script th:inline="javascript">
        var ctx = [[@{/}]];
        window.onload = function () {
             let $ = document.querySelector.bind(document);
            // let countsDom = $('.counts')

            // //用户拥有的积分
            // let userHasPoints = 200000
            // //兑换一个产品的所需积分
            // let goodsPoints = 26000
            // //市场价
            // let marketPrice = 1500

            // $('.points').innerText = `${goodsPoints}积分`
            // $('.goods-info .rmb').innerText = `${marketPrice}元`
            // $('.needsPonts').innerText = `${goodsPoints}`

            // $('.minus-btn').onclick = function () {
            //     let count = Number(countsDom.innerText) - 1
            //     countsDom.innerText = count < 1 ? 1 : count;
            //     if(count <1){
            //         countsDom.innerText = 1
            //         $('.needsPonts').innerText =  goodsPoints
            //     }else{
            //         countsDom.innerText = count
            //         $('.needsPonts').innerText = count * goodsPoints
            //     }
            // }

            // $('.add-btn').onclick = function () {
            //     let count = Number(countsDom.innerText) + 1
            //     countsDom.innerText = count;
            //     // $('.needsPonts').innerText = count * goodsPoints
            // }

            $('.tab').onclick = e => {
                let target = e.target
                let show = target.dataset.show;
                let hide = target.dataset.hide;

                if (show && hide) {
                    $('.current').classList.remove('current');
                    $(`.tab-${show}`).classList.add('current');
                    $(`.${show}`).style.display = 'block';
                    $(`.${hide}`).style.display = 'none';
                }
            }

            $('.exchange-btn').onclick = function(){
                // if(userHasPoints<Number($('.needsPonts').innerText)){
                //     $('.mask').style.display = 'block'
                // }else{
                //     location.href = './order.html'
                // }
                window.location.href=ctx +"/wx/index/apply/"+[[${cardId}]]
            }

            $('.mask .confirm-btn').onclick = function(){
                $('.mask').style.display = 'none'
            }

            //函数节流
            let throttle = (fn, wait) => {
                var timer = null;
                return function () {
                    var context = this;
                    var args = arguments;
                    if (!timer) {
                        timer = setTimeout(function () {
                            fn.apply(context, args);
                            timer = null;
                        }, wait)
                    }
                }
            }

            window.addEventListener('scroll', throttle(() => {
                let scrollTop = document.documentElement.scrollTop
                if (scrollTop > 0) {
                    // let percent = scrollTop / ($('.container').clientHeight - document.body.clientHeight);
                    // //只保留一位小数
                    // percent = Number(percent.toString().match(/^\d+(?:\.\d{0,1})?/))
                    // //透明度随滚动距离变化，最小为 0.5
                    // percent = percent > 0.5 ? percent : 0.5;
                    $('.gotop').style.display = 'flex';
                    // $('.gotop').style.opacity = percent;
                } else {
                    $('.gotop').style.display = 'none'
                }
            }, 500))

            $('.gotop').onclick = function () {
                window.scrollTo({
                    top: 0,
                    behavior: 'smooth'
                })
            }
        }
    </script>
</body>

</html>